<template>
    <label class="a-label c-f-h c-f-s-center" :class="[
        `color-${formItemHook.myColor}`,
        `size-${formItemHook.mySize}`,
        { sharp: formItemHook.mySharp },
        props.square ? `c-square-${formItemHook.mySize}` : '',
        { 'c-w-100': props.block },
        {
            plain: props.plain,
        },
        alignClassName,
    ]" :style="[
    form?.myLabelWidth !== undefined
        ? `width: ${form.myLabelWidth}px; box-sizing: border-box;`
        : '',
]" ref="elRef">
        <slot></slot>
    </label>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.a-label {
    @each $colorPackageName, $colorPackageValue in $colorPackages {
        $frontColor: map-get($colorPackageValue, "frontColor");
        $bgColor: map-get($colorPackageValue, "bgColor");

        &.color-#{$colorPackageName} {
            &:not(.plain) {
                color: $frontColor;
                background-color: $bgColor;
            }
        }
    }

    @each $sizePackageName, $sizePackageValue in $sizePackages {
        &.size-#{$sizePackageName} {
            &:not(.c-square-#{$sizePackageName}) {
                &:not(.plain) {
                    padding-left: map-get($sizePackageValue, "space");
                }

                padding-right: map-get($sizePackageValue, "space");
                height: map-get($sizePackageValue, "size");
            }

            font-size: map-get($sizePackageValue, "fontSize");

            &:not(.sharp) {
                border-radius: map-get($sizePackageValue, "borderRadius");
            }
        }
    }
}
</style>

<script setup lang="ts">
import { useFormItem } from '@/hooks/useFormItem'
import { AlignType, FormBasePropsType, FormProvided } from '@/types'
import { computed, inject, nextTick, onMounted, onUnmounted, ref } from 'vue'

interface PropsType extends FormBasePropsType {
    square?: boolean
    block?: boolean
    plain?: boolean
    align?: AlignType
}
const props = withDefaults(defineProps<PropsType>(), {
    color: undefined,
    disabled: undefined,
    size: undefined,
    sharp: undefined,
    square: false,
    block: false,
    plain: false,
    align: 'left',
})

const formItemHook = useFormItem(props)
const form = inject<FormProvided | undefined>('form', undefined)

const alignClassName = computed(() => {
    if (form?.value.labelAlign === 'left') {
        return 'c-f-p-start'
    } else if (form?.value.labelAlign === 'right') {
        return 'c-f-p-end'
    }
    return 'c-f-p-center'
})
const elRef = ref<HTMLLabelElement>()
onMounted(() => {
    if (form?.value.autoAlignLabel) {
        methods.reportMyWidth()
    }
})
onUnmounted(() => {
    form?.value.removeLabelWidth(formItemHook.value.keyForFormItem)
})
const methods = {
    reportMyWidth() {
        const el = elRef.value
        if (el === undefined) {
            return
        }
        el.style.removeProperty('width')
        nextTick(() => {
            form?.value.addLabelWidth(formItemHook.value.keyForFormItem, el.clientWidth)
        })
    },
}
</script>